<template>
  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择文章" width="70%">
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="68px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="queryParams.title"
            class="!w-240px"
            clearable
            placeholder="请输入文章标题"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="文章分类" prop="categoryId">
          <el-select
            v-model="queryParams.categoryId"
            class="!w-240px"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" class="!w-240px" clearable placeholder="请选择状态">
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon class="mr-5px" icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon class="mr-5px" icon="ep:refresh" />
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
        <!-- 单选模式 -->
        <el-table-column label="#" width="55">
          <template #default="{ row }">
            <el-radio :value="row.id" v-model="selectedArticleId" @change="handleSingleSelected(row)">
              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column key="id" align="center" label="文章编号" prop="id" min-width="60" />
        <el-table-column label="封面图" min-width="80">
          <template #default="{ row }">
            <el-image
              :src="row.picUrl"
              class="h-30px w-30px"
              :preview-src-list="[row.picUrl]"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column label="文章标题" min-width="200" prop="title" />
        <el-table-column label="文章分类" min-width="100" prop="categoryId">
          <template #default="{ row }">
            <span>{{ categoryList?.find((c) => c.id === row.categoryId)?.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作者" min-width="100" prop="author" />
        <el-table-column label="状态" min-width="80" prop="status">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
  </Dialog>
</template>

<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as ArticleApi from '@/api/mall/promotion/article'
import * as ArticleCategoryApi from '@/api/mall/promotion/articleCategory'
import { CHANGE_EVENT } from 'element-plus'

/**
 * 文章表格选择对话框
 * 单选模式：点击表格左侧的单选框时，结束选择，并关闭对话框
 */
defineOptions({ name: 'ArticleTableSelect' })

// 列表的总页数
const total = ref(0)
// 列表的数据
const list = ref<ArticleApi.ArticleVO[]>([])
// 列表的加载中
const loading = ref(false)
// 弹窗的是否展示
const dialogVisible = ref(false)
// 查询参数
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  title: '',
  categoryId: undefined,
  status: undefined
})

// 选中的文章ID
const selectedArticleId = ref<number>()

/** 打开弹窗 */
const open = (article?: ArticleApi.ArticleVO) => {
  // 重置选中状态
  selectedArticleId.value = undefined
  
  // 处理已选中
  if (article) {
    selectedArticleId.value = article.id
  }

  dialogVisible.value = true
  resetQuery()
}
// 提供 open 方法，用于打开弹窗
defineExpose({ open })

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ArticleApi.getArticlePage(queryParams.value)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const queryFormRef = ref()
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

// 处理单选选中
const emit = defineEmits([CHANGE_EVENT])
const handleSingleSelected = (row: ArticleApi.ArticleVO) => {
  selectedArticleId.value = row.id
  dialogVisible.value = false
  emit(CHANGE_EVENT, row)
}

// 文章分类列表
const categoryList = ref<ArticleCategoryApi.ArticleCategoryVO[]>([])

onMounted(async () => {
  // 加载文章分类列表
  categoryList.value = await ArticleCategoryApi.getSimpleArticleCategoryList()
})
</script> 